Puzzle Animation - UXY
For my UXY website iteration, I decided to create a playful puzzle piece that scales, rotates, and moves along a curved path as you scroll. While the scaling and rotation were straightforward, achieving the curved movement proved a bit more challenging.
Initially, I experimented with using an invisible SVG line as a path for the puzzle piece.
Then, I realized that I could keep the puzzle piece fixed along the Y-axis within the viewbox and only move it along the X-axis based on scroll. Since the viewbox itself moves on the Y-axis while scrolling, this combination of the puzzle piece’s X-axis movement and the viewbox’s Y-axis movement creates a smooth, curved animation that flows naturally with the rest of the website content.
To simplify positioning calculations, I set the page height to 3.5 viewheights: 1 viewheight for the hero section, 1 for "Our Studio," 1 for "Contact Us," and 0.5 for the footer.
In the final version, Sanders and I decided to combine our iterations. To make this work, I had to adjust a few things, specifically, I modified the animation so that the puzzle piece would hide behind the footer and would no longer start from the vertical center of the viewbox.